<template>
<div>
  <div>B-1页面</div>
  <div>
     <transition-group name="flip-list" tag="ul">
      <div v-for="(item,index) in list" :key="item.name" >{{item.name}}
        <button @click="toFirst(index)">置顶</button>
        <button @click="up(index)">上移</button>
        <button @click="down(index)">下移</button>
      </div>
       </transition-group>
  </div>
</div>

</template>
<script>
export default {
  data () {
    return {
        list:[
          {name:1},
          {name:2},
          {name:3},
          {name:4},
          {name:5},
          {name:6}
        ]    
    }
  },
  methods: {
    //置顶
    toFirst(index){
      if(index!=0){
       this.list.unshift(this.list.splice(index,1)[0])
      }
    },
    //上移
    up(index){
      if(index!=0){
       this.list[index]=this.list.splice(index-1,1,this.list[index])[0]
      }else{
        this.list.push(this.list.shift())
      }
    },
    //下移
    down(index){
      if(index!=this.list.length-1){
       this.list[index]=this.list.splice(index+1,1,this.list[index])[0]
      }else{
        this.list.unshift(this.list.splice(index,1)[0])
      }
    },
  }
}
</script>
<style scoped>
.flip-list-move {
  transition: transform 1s;
}
</style>